<template>
	<view class="empty-state" v-if="show">
		<image :src="icon" class="empty-icon" mode="aspectFit"></image>
		<text class="empty-text">{{ message }}</text>
		<button v-if="showRetry" class="retry-btn" @click="onRetry">重试</button>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: true
		},
		icon: {
			type: String,
			default: '/static/empty.png'
		},
		message: {
			type: String,
			default: '暂无数据'
		},
		showRetry: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		onRetry() {
			this.$emit('retry');
		}
	}
}
</script>

<style lang="scss">
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
	height: 100%;
	box-sizing: border-box;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	color: #999;
	font-size: 28rpx;
	margin-bottom: 30rpx;
}

.retry-btn {
	background-color: #007AFF;
	color: #fff;
	font-size: 28rpx;
	padding: 10rpx 40rpx;
	border-radius: 40rpx;
	border: none;
}
</style>